<template>
  <div class="custom-error-page">
    <Animation name="error404" width="240px" height="240px" class="self-center" />
    <div class="bg-CG300 w-[1px] max-sm:hidden" />
    <div class="flex flex-col justify-center">
      <div class="text-[32px] max-sm:self-center max-sm:text-xl">
        抱歉，你访问的页面找不到了
      </div>
      <div class="text-light mt-2 max-sm:self-center">
        请返回精彩活动继续浏览
      </div>
      <div v-if="operationList?.length" class="flex gap-4 mt-6 operation-list max-sm:self-center">
        <span v-for="item in operationList" :key="item.text" @click="goLink(item)">
          <d-button v-bind="item" variant="solid">
            {{ item.text }}
          </d-button>
        </span>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import Animation from '@/components/Animation/index.vue'

const router = useRouter()

const operationList = [{
  text: '返回精彩活动',
  href: '/activity',
  variant: 'solid',
  color: 'primary'
}]


function goLink(item: any) {
  router.replace(item.href)
}
</script>

<style lang="scss">
.custom-error-page {
  padding-top: 60px;
  display: flex;
  justify-content: center;
  @apply flex flex-col sm:flex-row gap-[16px] sm:gap-[32px] lg:gap-[64px];

  .operation-list {
    :deep(.devui-button) {
      width: 160px;
      border-radius: var(--border-radius);
    }
  }
}
</style>
